<template>
  <div>
    <div 
     @click="$emit('back')"
      class="relative w-full h-auto min-h-[103px] bg-[#191919] rounded-[20px] p-4 md:p-6 cursor-pointer transition-all duration-300 hover:bg-[#222222] flex flex-col md:flex-row items-start md:items-center"
      :class="{'opacity-50 cursor-not-allowed': unit.locked}"
    >
    <!-- 左侧图标 -->
    <div class="flex items-center mb-2 md:mb-0">
      <div class="w-6 h-6 flex items-center justify-center">
        <ChevronDownIcon></ChevronDownIcon>
      </div>
    </div>

    <!-- 单元标题 -->
    <div class="ml-2 md:ml-4 mb-3 md:mb-0 flex-grow">
      <h3 class="text-xl md:text-2xl lg:text-[32px] text-white font-bold leading-tight md:leading-[39px] font-inter break-words">{{ unit.title }}</h3>
    </div>

    <!-- 进度条区域 -->
    <div class="w-full md:w-auto md:flex-grow lg:max-w-[566px] h-[31px] mt-2 md:mt-0 md:mx-4">
      <!-- 背景进度条 -->
      <div class="relative w-full h-full">
        <div class="absolute inset-0 bg-white/20 rounded-[20px] shadow-lg"></div>
        
        <!-- 实际进度条 -->
        <div 
          class="absolute top-0 left-0 h-full bg-white rounded-[20px] shadow-lg transition-all duration-500"
          :style="{ width: `${unit.progress}%` }"
        ></div>
        
        <!-- 进度百分比文字 -->
        <div class="absolute left-[11px] top-1/2 transform -translate-y-1/2">
          <span class="text-black text-lg md:text-xl lg:text-[24px] font-bold leading-tight md:leading-[29px] font-inter">{{ unit.progress }}%</span>
        </div>
      </div>
    </div>

    <!-- 右侧单词数量 -->
    <div class="absolute top-3 right-3 md:static md:ml-2">
      <div class="flex items-center gap-2">
        <VocabularyIcon class="text-white" :size="18" />
        <span class="text-white text-base md:text-lg lg:text-[20px] font-bold leading-tight md:leading-[24px] font-inter">{{ unit.words }}</span>
      </div>
    </div>
  </div>
    <div class="relative min-h-full pb-8 w-full max-w-[600px] m-auto mt-10 md:mt-20">
      <!-- 空状态显示 -->
      <div v-if="lessons.length === 0" class="flex flex-col items-center justify-center min-h-[400px] bg-[#191919] rounded-[20px] p-8">
        <div class="text-6xl mb-4">📖</div>
        <h3 class="text-2xl text-white font-bold mb-2">暂无课程</h3>
        <p class="text-white/60 text-center">该单元还没有任何课程<br>点击下方新建按钮开始学习</p>
        <button 
          @click="$emit('create-course')"
          class="mt-6 px-6 py-3 bg-white text-gray-800 rounded-full font-bold hover:bg-gray-100 transition-colors"
          :class="{ 'opacity-50 cursor-not-allowed': isNewLessonDisabled }"
        >
          新建课程
        </button>
      </div>

      <!-- 现有的课程列表内容 -->
      <div v-else class="relative" :style="{ height: containerHeight }">
        <div 
          class="w-[8rem] md:w-[10rem] h-[8rem] md:h-[10rem] bg-white rounded-2xl absolute flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden hover:-translate-y-1.5 hover:shadow-lg"
          v-for="(lesson, index) in lessons" 
          :key="lesson.id" 
          :class="{ 
            'opacity-50 cursor-not-allowed hover:transform-none': lesson.locked, 
            'left-0': isLeftSide(index), 
            'right-0': !isLeftSide(index) 
          }" 
          :style="getCardStyle(index)"
          @click="handleLessonClick(lesson)"
        >
          <div class="z-0" :class="lesson.progress >= 100 ? 'opacity-100' : 'opacity-100'">
            <StarIcon :color="lesson.progress >= 100 ? '#000000' : '#000000'" :size="80" />
          </div>
          <div class="text-xl md:text-2xl font-bold text-gray-800 z-10 my-[2%]">{{ lesson.name }}</div>
          <div class="w-[70%] h-3 bg-[#CCCCCC] rounded-full z-10">
            <div v-if="!lesson.locked" class="h-full bg-white rounded-full transition-all duration-500 shadow-[0_4px_4px_rgba(0,0,0,0.25)]" :style="{ width: `${lesson.progress}%` }"></div>
          </div>
        </div>
        
        <!-- 新建课程按钮 -->
        <div 
          v-if="!isNewLessonDisabled"
          class="w-[8rem] md:w-[10rem] h-[8rem] md:h-[10rem] bg-[#191919] rounded-2xl absolute flex flex-col items-center justify-center cursor-pointer transition-all duration-300 hover:-translate-y-1.5 hover:shadow-lg"
          :class="{ 
            'left-0': isLeftSide(lessons.length), 
            'right-0': !isLeftSide(lessons.length) 
          }" 
          :style="getCardStyle(lessons.length)"
          @click="$emit('create-course')"
        >
          <PlusIcon class="text-white" :size="40" />
          <div class="text-white text-lg mt-2">新建课程</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { StarIcon, ChevronDownIcon, PlusIcon } from '@/components/icons';
import VocabularyIcon from '@/components/icons/VocabularyIcon.vue';
import SoundIcon from '@/components/icons/SoundIcon.vue';

// 接收数据
const props = defineProps({
  unit: {
    type: Object,
    required: true
  },
  lessons: {
    type: Array,
    required: true,
    default: () => []
  },
  isNewLessonDisabled: {
    type: Boolean,
    default: false
  },
  containerHeight: {
    type: String,
    required: true
  }
});

// 定义事件
const emit = defineEmits(['back', 'create-course', 'select-lesson', 'select-listening']);

// 布局计算函数
const isLeftSide = index => index % 2 === 0;

const getCardStyle = index => ({
  top: `${index * (160 + 50)}px`, // 使用固定的尺寸常量
  marginBottom: '1.5rem'
});

// 处理课程点击
const handleLessonClick = (lesson) => {
  if (!lesson.locked) {
    emit('select-lesson', lesson);
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.font-inter {
  font-family: 'Inter', sans-serif;
}
</style> 